var templatename = $('#templatename').html(); // 暂时用不到,先留着
var apppageid = $('#apppageid').html();       // 模板id
var apprecname = $('#apprecname').html();     // 模板名称
var pagetplname = $('#pagetplname').html();   // 

var column_area_recommend = []; //区域推荐数据
var recommend_data_type = 0;
var rectpl_id = apppageid; //模板id
var area = `y0x0y0`; //推荐区域
var pagetpl_name = pagetplname || 'XLSZSYMB';
var apprec_name = apprecname || 'XLSZSYTJWXT';
// XLSZSYTJWSY XLSZSYTJWXT XLSZSYTJWZJWZ XLSZSYTJWTSYLS 
// var index_nav_show = 0; //控制首页内容模板显示
var API_URL = 'http://cms.yjuji.com/'

// n2区域栏目推荐位数据
function getColumnsN2() {
    $.ajax({
        url: `/api/ott/1/2/paneltpl/${pagetpl_name}/${apprec_name}`,
        dataType: 'json',
        async: false,
        success: function(data) {
            if(data.status == 200) {
                for (var ele in data.data) {
                    switch (ele) {
                        case 'y0x0y0':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    _htmlcon += '<div class="n2_content_top_left_top" id="n2_y0x0y0__' + i + '">';
                                    _htmlcon += '<div class="n2_content_top_left_top_box">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'y0x0y1':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    var _left_value = i % 9 * 128;
                                    var _top_value = i / 9 * 99;
                                    _htmlcon += '<div class="n2_content_bot_bot_box" id="n2_y0x0y1__' + i + '" style="left:' + _left_value + 'px;top: ' + _top_value + 'px;">';
                                    _htmlcon += '<div>';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'y0x1':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    // console.log(_data[i].img)
                                    var _htmlcon = '';
                                    _htmlcon += '<div class="n2_content_top_right_left" id="n2_y0x1__' + i + '">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'y0x2':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    _htmlcon += '<div  id="n2_y0x2__' + i + '">';
                                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        case 'y1':
                            getColumnsFn({
                                data: data.data[ele]['data'],
                                ele: ele,
                                loopFn: function(i, _data) {
                                    var _htmlcon = '';
                                    // if(i < 1) {
                                        // _htmlcon += '<div class="n2_content_bot_top">' + _data.subtitle + '</div>';
                                    // }
                                    console.log(_data[i].img)
                                    _htmlcon += '<div id="n2_y1__' + i + '" style="left:0;top: 0;">';
                                    _htmlcon += '<img src="'+_data[i].img+'" alt="">';
                                    _htmlcon += '</div>';
                                    return _htmlcon;
                                },
                            });
                            break;
                        default:
                            break;
                    }
                }
                addClickActive(data.data);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}

function getColumnsFn(obj) {
    var defaults = {
        data: obj.data,
        ele: obj.ele,
        loopFn: obj.loopFn,
    }
    var _data = defaults.data;
    var len = _data.length;
    var _htmlcon = '';
    // if(defaults.ele == 'y1') {
        // _htmlcon += '<div class="n2_content_bot_top">' + _data.subtitle + '</div>';
    // }
    for (var i = 0; i < len; i++) {
        _htmlcon += defaults.loopFn(i, _data);
    }
    document.getElementById(defaults.ele).innerHTML = _htmlcon;
}

// 数据回填
function create(data, area) {
    switch (area) {
        case 'y0x0y0':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    _htmlcon += '<div class="n2_content_top_left_top" id="n2_y0x0y0__' + i + '">';
                    _htmlcon += '<div class="n2_content_top_left_top_box">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'y0x0y1':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    var _left_value = i % 9 * 128;
                    var _top_value = i / 9 * 99;
                    _htmlcon += '<div class="n2_content_bot_bot_box" id="n2_y0x0y1__' + i + '" style="left:' + _left_value + 'px;top: ' + _top_value + 'px;">';
                    _htmlcon += '<div>';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'y0x1':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    console.log(_data[i].img)
                    var _htmlcon = '';
                    _htmlcon += '<div class="n2_content_top_right_left" id="n2_y0x1__' + i + '">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'y0x2':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    _htmlcon += '<div  id="n2_y0x2__' + i + '">';
                    _htmlcon += '<img src="' + _data[i].img + '" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        case 'y1':
            getColumnsFn({
                data: data,
                ele: area,
                loopFn: function(i, _data) {
                    var _htmlcon = '';
                    _htmlcon += '<div id="n2_y1__'+i+'" style="left:0;top: 0;">';
                    // _htmlcon += '<div>' + _data[i].title + '</div>'
                    _htmlcon += '<img src="'+_data[i].img+'" alt="">';
                    _htmlcon += '</div>';
                    return _htmlcon;
                },
            });
            break;
        default:
            break;
    }
}

//使用col插件实现表格头宽度拖拽
$("#media_assets .table").colResizable();

$('#table_livebox').show();

// $(`#${apprec_name}`).show();

getDataType(getMediaAsset, renderDataType, getColumnAreaRecommend);

getColumnsN2();
$('#n2_y0x0y0').addClass('pitchOn');
$('#area_name').html(area);
$('#top_title').html(apprecname);